<nav id="breadcrumbs" aria-label="breadcrumbs">
  <!-- desktop -->
  <ul class="hidden md:inline-flex gap-3 mb-4 lg:mb-5 text-sm">
    <% taxons.each_with_index do |taxon, index| %>
      <li class="opacity-50"><%= link_to taxon.name, spree.nested_taxons_path(taxon), title: taxon.name %></li>
      <div class="breadcrumb-square opacity-50"></div>
    <% end %>

    <li class="text-text opacity-100"><%= product.name %></li>
  </ul>

  <!-- mobile -->
  <% if taxons.any? %>
    <ul class="md:hidden mb-4 text-sm">
      <li class="opacity-50">
        <%= link_to spree.nested_taxons_path(taxons.last), title: taxons.last.name, class: 'inline-flex items-center gap-1' do %>
          <strong><%= render 'spree/shared/icons/chevron', size: 16 %></strong>
          <%= taxons.last.name %>
        <% end %>
      </li>
    </ul>
  <% end %>
</nav>
